<template>
  <div>
    <introduce>
      <span class="title-bold" slot="title">仪表盘</span>
      <span slot="info"> - 设备概览和传感数据可视化</span>
    </introduce>
    <div class="gailan">
      <div class="gailan-l">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>设备概览</span>
            <i class="iconfont icon-askoutline"></i>
            <el-button style="float: right; padding: 3px 0" type="text"
              >绑定设备</el-button
            >
          </div>
          <div class="con">
            <div class="shebei"></div>
            <div class="line"></div>
            <div class="wan">
              <div class="num">{{ deviceObj.LoRaWAN.total }}</div>
              <div class="txt">
                <div>LoRaWAN</div>
                <div>网关</div>
              </div>
            </div>
            <div class="line"></div>
            <div class="pp">
              <div class="num">{{ deviceObj.LoRaPP.total }}</div>
              <div class="txt">
                <div>LoRaPP</div>
                <div>网关</div>
              </div>
            </div>
            <div class="line"></div>
            <div class="qunzu">
              <div class="num">{{ deviceObj.group }}</div>
              <div class="txt">群组</div>
            </div>
            <div class="line-big"></div>
            <div class="sensor">
              <div class="img">
                <i class="iconfont icon-yalichuanganqi"></i>
              </div>
              <div class="info">
                <div class="num">{{ deviceObj.sensor.total }}</div>
                <div class="txt">传感器结点</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="jiankong">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>监控</span>
            <i class="iconfont icon-askoutline"></i>
          </div>
          <div class="list">
            <span>网关离线</span>
            <el-tag type="success">{{
              deviceObj.LoRaWAN.offline + deviceObj.LoRaPP.offline
            }}</el-tag>
          </div>
          <div class="list">
            <span>节点离线</span>
            <el-tag type="success">{{ deviceObj.sensor.offline }}</el-tag>
          </div>
          <div class="list">
            <span>传感器低电量</span>
            <el-tag type="danger">{{ deviceObj.sensor.lowBattery }}</el-tag>
          </div>
        </el-card>
      </div>
      <div class="gonggao">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>公告</span>
            <i class="iconfont icon-askoutline"></i>
          </div>
          <div class="msg">
            <i class="iconfont icon-info"></i>
            <span>senseCAP V3.02020-02-13 14:28:07</span>
          </div>
          <div class="msg">
            <i class="iconfont icon-info"></i>
            <span>senseCAP V3.02020-02-13 14:28:07</span>
          </div>
        </el-card>
      </div>
    </div>
    <div class="charts">
      <div class="item">
        <el-card class="box-card">
          <div class="clearfix">
            <span>空气湿度</span>
          </div>
          <div id="air" ref="air"></div>
        </el-card>
      </div>
      <div class="item even">
        <el-card class="box-card">
          <div class="clearfix">
            <span>光照</span>
          </div>
          <div id="beam" ref="beam"></div>
        </el-card>
      </div>
      <div class="item">
        <el-card class="box-card">
          <div class="clearfix">
            <span>气压</span>
          </div>
          <div id="pressure" ref="pressure"></div>
        </el-card>
      </div>
      <div class="item even">
        <el-card class="box-card">
          <div class="clearfix">
            <span>土壤湿度</span>
          </div>
          <div id="soil" ref="soil"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { $deviceCount } from "@/api/index.js";
import { $sensorCount } from "@/api/index.js";
import Introduce from "@/components/Introduce.vue";
export default {
  name: "dashboardView",
  data() {
    return {
      deviceObj: {
        LoRaPP: "",
        LoRaWAN: "",
        sensor: "",
      },
    };
  },
  components: { Introduce },
  mounted() {
    let option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [],
          type: "line",
          smooth: true,
        },
      ],
    };
    let option1 = {
      xAxis: {
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [],
          type: "bar",
        },
      ],
    };
    let option2 = {
      legend: {
        top: "bottom",
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: [25, 125],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
          data: [],
        },
      ],
    };
    let option3 = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [],
          type: "line",
          smooth: true,
        },
      ],
    };
    $deviceCount().then((res) => {
      this.deviceObj = res.data.data;
    });
    $sensorCount().then((res) => {
      console.log(res);
      option.series[0].data = res.data.data.air;
      option1.series[0].data = res.data.data.beam;
      option2.series[0].data = res.data.data.pressure;
      option3.series[0].data = res.data.data.soil;
      var myChart = this.$echarts.init(this.$refs.air);
      var myChart1 = this.$echarts.init(this.$refs.beam);
      var myChart2 = this.$echarts.init(this.$refs.pressure);
      var myChart3 = this.$echarts.init(this.$refs.soil);
      option && myChart.setOption(option);
      option1 && myChart1.setOption(option1);
      option2 && myChart2.setOption(option2);
      option3 && myChart3.setOption(option3);
    });
  },
};
</script>

<style lang="less" scoped>
.gailan {
  display: flex;
  margin-top: 10px;
  height: 220px;
  .clearfix i {
    color: gray;
    margin-left: 2px;
  }
  .clearfix span {
    font-weight: 700;
  }
  .gailan-l {
    width: 60%;
    .el-card {
      height: 220px;
      .con {
        height: 120px;
        display: flex;
      }
    }
    .box-card {
      .shebei {
        width: 15%;
        height: 120px;
        background: url("@/assets/gateway.png") no-repeat;
        background-size: contain;
      }
      .line {
        width: 2px;
        height: 60px;
        background: #cdd6e1;
        margin: 22px 20px;
      }
      .line-big {
        width: 2px;
        height: 120px;
        background: #cdd6e1;
        margin: 3px 20px;
      }
      .wan,
      .pp,
      .qunzu {
        width: 15%;
        height: 120px;
        text-align: center;
        font-weight: 700;
        margin-top: 10px;
      }
      .sensor {
        width: 40%;
        height: 120px;
        display: flex;
        .img {
          width: 50%;
          height: 100%;
          transform: rotate(180deg);
          text-align: center;
          line-height: 120px;
          color: gray;
        }
        .info {
          margin-top: 30px;
          width: 50%;
          height: 100%;
          .txt {
            text-align: center;
            font-weight: 700;
          }
        }
        i {
          font-size: 50px;
        }
      }
      .qunzu .txt {
        margin-top: 20px;
      }
      .num {
        font-size: 30px;
        font-weight: 700;
        text-align: center;
      }
    }
  }
  .jiankong {
    margin-left: 10px;
    width: 20%;
    .el-card {
      height: 220px;
    }
    .list {
      height: 32px;
      font-weight: 700;
      .el-tag {
        text-align: center;
        font-weight: 700;
        width: 40px;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        float: right;
      }
    }
  }
  .gonggao {
    margin-left: 10px;
    width: 20%;
    .el-card {
      height: 220px;
    }
    .msg {
      .iconfont {
        color: green;
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
}
.charts {
  height: 820px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 400px;
    width: 49.5%;
    margin-top: 10px;
    background: #fff;
  }
  .even {
    margin-left: 11px;
  }
}
#air,
#beam {
  width: 100%;
  height: 339px;
}
#pressure,
#soil {
  height: 339px;
}
canvas {
  width: 700px;
}
</style>